﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Tecnology.aspx.cs" Inherits="Demo.Web.Catalogs.Tecnology" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../Resources/css/styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var commandHandler = function(command, record) {
            switch (command) {
            case "Edit":
                var win = App.TecnologyWindow;
                win.clearContent();
                win.show();
                win.setTitle('Modificar Tecnologia');
                win.load({
                    url: "TecnologyEdit.aspx",
                    params: {
                        Id: record.get('Id')
                    }
                });
                break;
            }
        };
        var saveData = function () {
            App.GridData.setValue(Ext.encode(Ext.getCmp('gpTecnologies').getRowsValues({ selectedOnly: false, visibleOnly: true, excludeId: true })));
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager" runat="server" DirectMethodNamespace="Demo" />
    <ext:Hidden ID="GridData" runat="server" />
    <ext:Viewport ID="Viewport1" runat="server" Layout="Anchor">
        <Items>
            <ext:Panel ID="Panel2" Height="35" runat="server" Header="false" BodyCls="PanelContent"
                Border="false">
                <Items>
                    <ext:Label Cls="HeaderLabel" ID="lblTittle" runat="server" Text="Tecnologias">
                    </ext:Label>
                </Items>
            </ext:Panel>
            <ext:Panel ID="Panel1" runat="server" Header="false" Border="false" AnchorHorizontal="100%"
                Height="150" BodyPadding="15" Layout="Anchor" BodyCls="PanelContent">
                <Items>
                    <ext:FormPanel ID="Panel3" Title="Filtros de Busqueda" BodyPadding="5" runat="server"
                        AnchorHorizontal="100%" MinWidth="400" AnchorVertical="100%" BodyCls="PanelFilter" Frame="True" >
                        <Items>
                            <ext:Container ID="Container1" runat="server" AnchorHorizontal="100%" Layout="Column"
                                Margin="10">
                                <Items>
                                    <ext:Container ID="Container2" runat="server" Layout="AutoLayout" Width="300">
                                        <Items>
                                            <ext:TextField ID="txtName" AutoFocus="true" runat="server" FieldLabel="Nombre" AnchorHorizontal="100%"
                                                LabelAlign="Left" Width="550" MaxLength="200" />
                                        </Items>
                                    </ext:Container>
                                </Items>
                            </ext:Container>
                        </Items>
                        <TopBar>
                            <ext:Toolbar ID="Toolbar2" runat="server">
                                <LayoutConfig>
                                    <ext:HBoxLayoutConfig Align="top" Pack="Start" />
                                </LayoutConfig>
                                <Items>
                                    <ext:Button ID="btnSearch" runat="server" Text="Buscar" Icon="Find">
                                        <DirectEvents>
                                            <Click OnEvent="BtnSearchClick">
                                                <EventMask ShowMask="true" />
                                            </Click>
                                        </DirectEvents>
                                    </ext:Button>
                                    <ext:ToolbarSeparator runat="server"/>
                                    <ext:Button ID="btnLimpiar" runat="server" Text="Limpiar" Icon="Decline">
                                        <Listeners>
                                            <Click Handler="this.up('form').getForm().reset();" />
                                        </Listeners>
                                    </ext:Button>                                    
                                    <ext:Button ID="btnRefresh" runat="server" Text="Refresh" Hidden="true" Disabled="true">
                                        <DirectEvents>
                                            <Click OnEvent="SaveAndRefresh">
                                                <EventMask ShowMask="true" />
                                            </Click>
                                        </DirectEvents>
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                    </ext:FormPanel>
                </Items>
            </ext:Panel>     
           <ext:Panel ID="Panel4" runat="server" Header="false" BodyPadding="15" Layout="Anchor"
                Border="false" AnchorVertical="100%" BodyCls="PanelContentGrid" MinWidth="400">
                <Items>
                    <ext:GridPanel ID="gpTecnologies" runat="server" Header="true" Border="true" TrackMouseOver="true"
                        Title="Tecnologias" AutoExpandColumn="Name" CellId="Id" ItemID="ID" Frame="True">
                        <Store>
                            <ext:Store ID="dsTecnology" OnReadData="DsTecnologyReadData" runat="server" PageSize="10"
                                AutoLoad="true" RemoteSort="true" RemotePaging="True">
                                <Model>
                                    <ext:Model ID="mdlResource" runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Id" />
                                            <ext:ModelField Name="Description" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                                <Proxy>
                                    <ext:PageProxy />
                                </Proxy>
                                <Sorters>
                                    <ext:DataSorter Property="Name" Direction="ASC" />
                                </Sorters>
                                <AutoLoadParams>
                                    <ext:StoreParameter Name="limit" Value="10" Mode="Raw" />
                                    <ext:StoreParameter Name="start" Value="0" Mode="Raw" />
                                </AutoLoadParams>
                            </ext:Store>
                        </Store>
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>                                
                                <ext:Column ID="Column2" DataIndex="Description" Header="Description" runat="server"
                                    Sortable="true" Flex="200"/>
                                <ext:CommandColumn ID="clmDelete" Width="30px" runat="server">
                                    <Commands>
                                        <ext:GridCommand Icon="Delete" CommandName="Delete" />
                                    </Commands>
                                    <DirectEvents>
                                        <Command OnEvent="BtnDeleteConfirmClick">
                                            <ExtraParams>
                                                <ext:Parameter Name="id" Value="record.data['Id']" Mode="Raw">
                                                </ext:Parameter>
                                            </ExtraParams>
                                        </Command>
                                    </DirectEvents>
                                </ext:CommandColumn>
                                <ext:CommandColumn ID="clmEdit" Width="30px" runat="server">
                                    <Commands>
                                        <ext:GridCommand Icon="ApplicationFormEdit" CommandName="Edit" />
                                    </Commands>
                                    <Listeners>
                                        <Command Handler="commandHandler(command,record);" />
                                    </Listeners>
                                </ext:CommandColumn>
                            </Columns>
                        </ColumnModel>
                        <TopBar>
                            <ext:Toolbar ID="Toolbar1" runat="server">
                                <LayoutConfig>
                                    <ext:HBoxLayoutConfig Align="top" Pack="Start" />
                                </LayoutConfig>
                                <Items>
                                    <ext:Button ID="btnNew" runat="server" Text="Nuevo" Icon="Add">
                                        <DirectEvents>
                                            <Click OnEvent="BtnNewClick">
                                            </Click>
                                        </DirectEvents>
                                    </ext:Button>
                                      <ext:ToolbarSeparator />
                                    <ext:Button ID="btnExcel" runat="server" Text="Exportar Excel" AutoPostBack="true"
                                        OnClick="ToExcel" Icon="PageExcel">
                                        <Listeners>
                                            <Click Fn="saveData" />
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
                        </SelectionModel>
                        <BottomBar>
                            <ext:PagingToolbar ID="PagingToolbar1" runat="server" DisplayInfo="true" DisplayMsg="Mostrando Tecnologias {0} - {1} De {2}"
                                EmptyMsg="No hay Tecnologias para mostrar" />
                        </BottomBar>
                    </ext:GridPanel>
                </Items>
            </ext:Panel>
            <ext:Window ID="TecnologyWindow" runat="server" Icon="ApplicationFormEdit" Width="450"
                Height="200" Hidden="true" Modal="true" Plain="true">
                <Loader ID="Loader1" runat="server" AutoLoad="false" Mode="Frame">
                    <LoadMask ShowMask="true">
                    </LoadMask>
                </Loader>
            </ext:Window>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>
